<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="test1"> 
        
    </div>
    <div id="test2"> 
        
    </div>
    <script>
        Vue.directive('upper-text',function(el,binding){
            el.textContent = binding.value.toUpperCase()
        })
        let test2={
            template:`
                <div>
                    <p v-upper-text="msg2">{{msg2}}</p>
                    <p v-lower-text="msg2"></p>    
                </div>
            `,
            data() {
                return {
                    msg1:'just do it!'
                }
            },
        }
        let test1 ={
            template:`
            <div>
                <p v-upper-text="msg1">{{msg1}}</p>
                <p v-lower-text="msg1"></p>    
            </div>
            `,
            data() {
                return {
                    msg1:'NBA I LOVE THIS GAME'
                }
            },
            directives:{
                'lower-text'(el,binding){
                el.textContent = binding.value.toLowerCase()
            },
            components:{test2},
            }
        }
        
        new Vue({
            render:h => h(test1)
        }).$mount("#test1")

    </script>
</body>
</html>